.page{
    scroll-behavior:smooth;
    position: fixed;
    bottom: 75px;
    top:50px;
    left: 0;
    flex-direction:column;
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 100%;
    overflow: auto;
    transform-origin: bottom left;
    transition-duration: 0.1s;
    transition-property:transform,visibility;
-moz-transition-property: transform,visibility; /* Firefox 4 */
-webkit-transition-property:transform,visibility; /* Safari 和 Chrome */
-o-transition-property:transform,visibility; /* Opera */
    .page-top{
        display: flex;
        flex-direction:row;
        .page-top-left{
            margin: 80px 120px;
            div,a,img{
                border-radius: 100%;
            }
            .plate{
                position: relative;
                width: 320px;
                height: 320px;
                animation: move 25s linear infinite;
                .plate-img{
                    width: 320px;
                    height: 320px;
                }
                .plate-cover{
                    width: 64%;
                    height: 64%;
                    position: absolute;
                    top:18%;
                    left: 18%;
                }
            }
            @keyframes move{ 
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
           }
            .plate-bottom{
                display: flex;
                margin-top: 15px;
                a{
                    width: 40px;
                    margin: 0 20px;
                    height: 40px;
                    background-color: rgb(245,245,245);
                    display: inherit;
                    align-items: center;
                    justify-content: center;
                    color: rgb(55,55,55);
                    font-size: 18px;
                }
            }
        }
        .page-top-right{
            margin-top: 50px;
            width: 600px;
            .song-detail{
                a{
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-size: 14px;
                }
                span{
                    white-space: nowrap;
                }
                .song-title{
                    color: rgb(51,51,51);
                    font-size: 20px;
                }
                .song-detailbox{
                    display: inline-flex;
                    align-items: center;
                    line-height: 35px;
                    width: 30%;
                    .song-info-type{
                        color: rgb(102,102,102);
                    }
                    .song-info-text{
                        color: rgb(80,125,175);
                    }
                }  
            }
            .song-lyric{
                margin-top: 15px;
                overflow: auto;
                width:90%;
                height: 400px;
                border-right: solid rgb(245,245,245) 2px;
                p{
                    color: rgb(102,102,102);
                    line-height: 36px;
                    display: flexbox;
                    align-items: center;
                    font-size: 15px;
                }
            }
        }
    }
    .page-bottom{
        display: flex;
        margin-top: 20px;
        flex-direction: row;
        .page-bottom-main{
            display: inherit;
            flex-direction:column;
            .input-comment{
            h2{
                color: rgb(51,51,51);
                font-size: 20px;
                font-weight: bold;
                display: inline;
            }
            h4{
                display: inline;
                font-size: 14px;
                color: rgb(153,153,153);
            }
            textarea{
                display: block;
                resize: none;
                outline:none;
                height: 100px;
                width: 600px;
                font-size: 14px;
                border-radius: 4px;
                border: solid rgb(230,230,230) 0.5px;
            }
            }
        }
        .page-bottom-side{
            margin-left: 100px;
            display: flex;
            flex-direction:column;
            width: 300px;
            p{
                font-size: 20px;
                color: rgb(51,51,51);
                font-weight: bold;
            }
            .list{
                height: 80px;
                width: 100%;
                display: inherit;
                flex-direction:row;
                border-radius: 4px;
                align-items: center;
                img{
                    height: 60px;
                    width: 60px;
                }
                div{
                    margin-left: 10px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-size: 15px;
                }
                &:hover{
                    background-color: rgb(241,242,243);

                }
            }
        }
    }
}
img{
    border-radius: 4px;
}